<template>
  <div id="start-exam">
    <el-dialog :close-on-click-modal="true" class="dialog-test" title="提示" :visible.sync="dialogTest" width="480px">
      <div style="text-align:center;">
        <div style="margin:30px;">
          <img src="../../../assets/images/notice.png" alt="">
        </div>
        进入实验题作答，理论试题自动提交哦~
        <!-- 进入实验题之前，理论题必须交卷，是否交卷并进入实验题 -->
      </div>
      <span slot="footer" class="dialog-footer" align="center">
        <el-button class="button-style" @click="toTest">进入实验题</el-button>
        <!-- <el-button class="button-style" @click="dialogTest = false">取消</el-button> -->
      </span>
    </el-dialog>
    <div class="preview-top">
      <div class="preview-top1">
        <div class="preview-top-content">
          <div v-if="resQuestionData">
            <span class="preview-title">{{ resQuestionData.paperName }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="jx-content exam-top">
      <div class="exam-top-content" v-if="resQuestionData">
        <div class="exam-title">
          <span>{{ resQuestionData.typeName }}</span>
          <span v-if="resQuestionData.type === 1">
            <span v-if="resQuestionData.isMultipleChoice">[多选题]</span>
            <span v-if="!resQuestionData.isMultipleChoice">[单选题]</span>
          </span>
        </div>
        <div class="exam-rightbox">
          <div v-if="endTime">结束时间：{{ endTime }}</div>
          <div>剩余时间：{{ getHour(resQuestionData.timeLeft) }}</div>
          <!-- 答题卡 -->
          <div class="question-tab">
            <el-popover popper-class="tab-popper" class="question-popover" placement="top-start" title="" width="" trigger="click">
              <el-tabs v-model="tabActiveName">
                <el-tab-pane v-for="(item,index) in resQuestionData.answerSheetList" :key="index" :name="String(item.type)">
                  <span slot="label">
                    <!-- 题型 -->
                    <!-- :value="item.answerSheetList.length" -->
                    <el-badge class="item">{{ item.typeName }}</el-badge>
                  </span>
                  <ul class="question-tab-item clearfix">
                    <li @click="clickQuestion(item2)" :class="{'active':isActive(item2,index2)}" v-for="(item2,index2) in item.answerSheetList" :key="index2">{{ item2.orderNumber }}</li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
              <div class="button-style" slot="reference">答题情况</div>
            </el-popover>
          </div>
          <!-- {{flags}}--98 -->
          <div class="question-tab">
              <div @click="submitNotice" class="button-style">交卷</div>
          </div>
        </div>
      </div>
    </div>
    <div class="exam-content" v-if="resQuestionData">
      <!-- <el-button :disabled="resQuestionData.orderNumber === 1" @click="prevQuestion" class="button-style">上一题</el-button>
          <el-button :disabled="resQuestionData.orderNumber === resQuestionData.questionCount" @click="nextQuestion" class="button-style">下一题</el-button> -->
      <div class="jian-box">
        <div class="jian-content">
          <div @click="prevQuestion" class="an-question prev-question" :class="{'disabled-question':resQuestionData.orderNumber === 1}" v-if="!flags"></div>
          <div @click="nextQuestion" class="an-question next-question" :class="{'disabled-question':resQuestionData.orderNumber === resQuestionData.questionCount }" v-if="!flags"></div>
          <div class="an-question  prev-question"  :class="{'disabled-question':resQuestionData.orderNumber === 1 || flags}"  v-if="flags"></div>
          <div class="an-question  next-question"  :class="{'disabled-question':resQuestionData.orderNumber === resQuestionData.questionCount || flags}" v-if="flags"></div>

        </div>
      </div>
      <div class="answer-title">
        <span>{{ resQuestionData.orderNumber }}、</span>
        <span v-html="resQuestionData.content"></span>
        <span class="c-blue">{{ resQuestionData.score }}分</span>
        <!-- 题/共多少题 -->
        <span class="question-num c-blue">{{ resQuestionData.orderNumber }}/{{ resQuestionData.questionCount }}</span>
      </div>
      <!-- answer:[] -->
      <!-- 选择题 -->
      <!-- 答案给序号 [0,1] -->
      <div v-if="resQuestionData.type === 1">
        <!-- 多选题 -->
        <div v-if="resQuestionData.isMultipleChoice">
          <el-checkbox-group v-model="checkList" @change="isChangeFn()">
            <el-checkbox v-for="(item,index) in resQuestionData.choiceList" :key="index" :label="index" class="jx-content">
              <div class="exam-item-xuan">{{ chose[index] }}</div>
              <div class="exam-item-chose" v-html="item"></div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 单选题 -->
        <div v-if="!resQuestionData.isMultipleChoice">
          <!-- change看是不是改了 -->
          <el-radio-group v-model="radio" @change="isChangeFn()">
            <el-radio v-for="(item,index) in resQuestionData.choiceList" :key="index" :label="index" class="jx-content">
              <template slot-scope="scope">
                <div class="exam-item-xuan">{{ chose[index] }}</div>
                <div class="exam-item-chose" v-html="item"></div>
              </template>
            </el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- 判断题 -->
      <!-- answer:true -->
      <div v-if="resQuestionData.type === 2">
        <div class="jx-content min-height-content">
          <div style="padding:10px;">请选择答案：</div>
          <el-radio-group v-model="radio2" style="padding:20px;" @change="isChangeFn()">
            <el-radio :label="true">正确</el-radio>
            <el-radio :label="false">错误</el-radio>
          </el-radio-group>
        </div>
      </div>
      <!-- 填空 -->
      <div class="jx-content fill-content" v-if="resQuestionData.type === 3 && fillList.length">
        <div>请填写答案：</div>
        <span v-show="false">{{ fillStr }}</span>
        <div v-for="(item,index) in fillList" :key="index">
          <span class="row-index">{{ index+1 }}.</span>
          <!-- change看是不是改了 -->
          <el-input @change="isChangeFn()" v-model="fillList[index]"></el-input>
        </div>
      </div>
      <!-- 简答 -->
      <!-- answer:'xxxxx' -->
      <div v-if="resQuestionData.type === 4">
        <div class="jx-content">
          <div>请填写答案：</div>
          <br />
          <!-- <mavonEditor @childChange="getChildVal" ref="answer"></mavonEditor> -->
          <mavonEditor ref="answer"></mavonEditor>
        </div>
      </div>

      <!-- <div class="btn-group question-change">
        <el-button :disabled="resQuestionData.orderNumber === 1" @click="prevQuestion" class="button-style">上一题</el-button>
        <el-button :disabled="resQuestionData.orderNumber === resQuestionData.questionCount" @click="nextQuestion" class="button-style">下一题</el-button>
      </div> -->
    </div>
  </div>
</template>
<script>
import mavonEditor from "../../../components/mavonEditor";
import axios from "axios";
import $ from "jquery";
export default {
  components: { mavonEditor },
  data() {
    return {
      //结束日期
      endTime:'',
      a: 5,
      //跳转实验题提示
      dialogTest: false,
      tabActiveName: "first",
      //单选
      radio: "",
      //多选
      checkList: [],
      //chose: ["A", "B", "C"],
      chose: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      //填空题数组
      fillList: [],
      //判断题
      radio2: "",
      //当前题
      resQuestionData: "",
      timer: null,
      timeLeft: null,
      //下一个题的id
      nextId: "",
      //答案
      answer: "empty",

      flags:false,
      ida:'',
      timer2: null,
      //是否更改了答案
      isChange:false,
      //简答内容
      //jdVal:""
    };
  },
  computed: {
    //填空题字符串
    fillStr() {
      let that = this;
      if (that.fillList.length) {
        //把学生添加的英文逗号","改为中文逗号"，"
        $.each(that.fillList, function(i, d) {
          that.fillList[i] = d.replace(/,/g, "，"); //把,替换成，
        });
        let result = that.fillList.join(",");
        console.log(result, 222);
        return result;
      }
    }
  },
  created: function() {
    this.ida = this.$route.query.paperId
    console.log(this.ida,8888)
    // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器\
    console.log(this.resQuestionData);
    clearInterval(this.timer);
    clearInterval(this.timer2);
    this.timer = null;
    this.setTimer();
  },
  destroyed: function() {
    // 每次离开当前界面时，清除定时器
    clearInterval(this.timer);
    clearInterval(this.timer2);
    this.timer = null;
    this.timer2 = null
  },
  mounted() {
    this.init();

  },
  methods: {
    //选择判断填空是否修改
    isChangeFn(){
      let that = this;
      that.isChange = true;
      console.log(that.isChange,0);
    },
    //简答专用是否修改
    getChildVal(msg){
      //this.jdVal = msg;
    },
    init() {
      this.reSubmitExam();
      this.startEx();
      this.getEndTime();

    },
    //获取剩余时间
    getEndTime() {
      let that = this;
      let paperId = that.$route.query.paperId;
      let courseId = this.$localstorage.getLocalStorage("setCourseId");
      axios
        .get(
          `/tes/course/${courseId}/course-test/paper/${paperId}/paper`
        )
        .then(function(res) {
          if (res.status === 200) {
            if (res.data.code === 200) {
                console.log(res.data,1232);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //交卷并跳转实验题
    toTest() {
      let that = this;
      that.dialogTest = false;
      that.submitExam();
    },
    //答题卡判断是否答题
    isActive(item2, index2) {
      //选择
      //多选 checkList:[]
      //单选 radio:'' answer:0
      //填空 ''
      //判断 radio2:''
      //简答 ''
      //综上 不是空字符串 不是undefined 不是'empty' 是数组并且不是空数组
      //是数组

      //填空题
      let isNull = false;
      if (item2.type === 3 && item2.answer) {
        let fillList = item2.answer.split(",");
        isNull = fillList.every(item => !item.match(/^\s*$/));
      }
      //多选题
      if (item2.answer instanceof Array) {
        return item2.answer.length;
      } else {
        //不是数组
        //            填写 / 没填写
        //填空 isNull true / false
        //单选 answer:0,1,2,3,4,5 / ''
        //判断 answer:true / false
        //简答 answer:'123' / ''

        //选择
        if (item2.type === 1) {
          if (item2.answer === 0) {
            return true;
          } else {
            return item2.answer;
          }
        }
        //判断
        if (item2.type === 2) {
          if (item2.answer === false || item2.answer === true) {
            return true;
          } else {
            return false;
          }
        }
        //填空
        if (item2.type === 3) {
          return isNull;
        }
        //简答
        if (item2.type === 4) {
          if (item2.answer) {
            return true;
          }
        }
      }
    },
    //验证交卷状态
    reSubmitExam() {
      let that = this;
      let paperId = that.$route.query.paperId - 0;
      axios
        .get(
          "/tes/course/" +
            that.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper"
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {

              //列表赋值
              let paperStatus = res.data.data.find(
                item => item.paperId === paperId
              ).paperStatus;
              //大于2没实验题 去列表页
              if (paperStatus > 2) {
                //进入考试页面
                that.$router.push({
                  path: "/Teaching/MyCourses/Examination/StudentExamList"
                });
              }
              //去实验题
              if (paperStatus === 2) {
                //进入考试页面
                console.log('====1')
                that.$router.push({
                  path: "/StartExamTest",
                  query: {
                    paperId: paperId
                  }
                });
              }
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //获取题目
    startEx() {
      let that = this;
      let paperId = that.$route.query.paperId;

      if (!paperId) {
        that.$message.error("试卷id错误");
      }

      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/paper"
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res,332);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //
              let resQuestionData = res.data.data;
              //结束日期
              if(resQuestionData.endType == 1){
                that.endTime = resQuestionData.endTime;
              }
              //console.log(resQuestionData, 223344);
              //查看几个空
              let fillNums = resQuestionData.content.split("(+)").length - 1;

              that.fillList = [];
              for (let i = 0; i < fillNums; i++) {
                that.fillList[i] = "";
              }
              console.log(that.fillList, 88888);

              //填空题替换(+)为（）
              resQuestionData.content = resQuestionData.content.replace(
                /\(\+\)/g,
                "（）"
              );
              console.log(resQuestionData.answerSheetList,444);
              //简答默认给空答案 answer:''
              let jdt = resQuestionData.answerSheetList.filter(item => item.type == 4);
              //如果有简答题
              if(jdt.length){
                let jdtList = jdt[0].answerSheetList;
                //console.log(jdtList,555);
                jdtList.forEach(item => {
                  if(item.answer === undefined){
                    item.answer = '';
                  }
                  //console.log(item,66);
                });
              }
              that.resQuestionData = resQuestionData;
              console.log(that.resQuestionData,223344);
              //填空题？
              //回填
              that.fillQuestion(that.resQuestionData);
              //tabActiveName默认选中第一个题型
              that.tabActiveName = String(that.resQuestionData.type);

              console.log(5550)

            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //上一题 获取答题卡当前题和上一题的row和当前题的rowNow  传答题卡reqAnswer
    prevQuestion() {
      let that = this;
     // that.flags = true
      if (that.resQuestionData.orderNumber === 1) {
        return;
      }
      let resQuestionData = that.resQuestionData;
      let answerSheetList = resQuestionData.answerSheetList;
      //答题卡所有题放在一个数组
      let newAnswerSheetList = answerSheetList
        .map(item => item.answerSheetList)
        .reduce((total, num) => total.concat(num));

      let nowIndex = newAnswerSheetList.findIndex(
        item => item.id === resQuestionData.id
      );
      let row = newAnswerSheetList[nowIndex - 1];
      let rowNow = newAnswerSheetList[nowIndex];
      //传答案 传答题卡 反答题卡
      this.reqAnswer(row, rowNow);

    },
    //下一题 获取答题卡当前题和下一题的row和当前题的rowNow  传答题卡reqAnswer
    nextQuestion() {
      let that = this
     // that.flags = true
      if (
        that.resQuestionData.orderNumber === that.resQuestionData.questionCount
      ) {
        return;
      }
      let resQuestionData = that.resQuestionData;
      let answerSheetList = resQuestionData.answerSheetList;
      //答题卡所有题放在一个数组
      let newAnswerSheetList = answerSheetList
        .map(item => item.answerSheetList)
        .reduce((total, num) => total.concat(num));
      let nowIndex = newAnswerSheetList.findIndex(
        item => item.id === resQuestionData.id
      );
      let row = newAnswerSheetList[nowIndex + 1];
      //let rowNow = newAnswerSheetList[nowIndex];
      let rowNow = newAnswerSheetList[nowIndex];
      //传答案 传答题卡 反答题卡
      this.reqAnswer(row, rowNow);
    },
    //点击答题卡选题 获取答题卡点击题的row和当前题的rowNow 传答题卡reqAnswer
    clickQuestion(row) {
      let that = this;
      //在答题卡中获取当前题对象
      let type = that.resQuestionData.type;
      //在答题卡中查找当前题的数据rowNow
      let rowNow = that.resQuestionData.answerSheetList
        .find(item => item.type === type)
        .answerSheetList.find(item2 => item2.id === that.resQuestionData.id);

      //传答案 传答题卡
      this.reqAnswer(row, rowNow);
    },
    //回填答案
    fillQuestion(resQuestionData) {
      let that = this;


      let id = resQuestionData.id;
      let type = resQuestionData.type;
      if (
        resQuestionData.answer !== undefined &&
        resQuestionData.answer !== "empty"
      ) {
        that.answer = resQuestionData.answer;
        //选择
        if (type === 1 && resQuestionData.answer !== false) {
          //多选
          if (resQuestionData.isMultipleChoice) {
            that.checkList = resQuestionData.answer;
          } else {
            //单选
            that.radio = resQuestionData.answer;
          }
        }
        //判断
        if (type === 2) {
          that.radio2 = resQuestionData.answer;
        }
        //填空
        if (type === 3) {
          let fillAnswers = resQuestionData.answer.split(",");
          $.each(that.fillList, function(i, d) {
            that.fillList[i] = fillAnswers[i];
          });
        }
        //简答
        if (type === 4 && that.resQuestionData !== false) {
          that.$nextTick(function() {
            that.$refs.answer.changeVal(resQuestionData.answer);
          });
        }

        console.log(that.checkList, 556);

      }
    },

    //上一题 下一题 选题 反答题卡
    choseQuestion(rowId) {
      let that = this;
      let paperId = that.$route.query.paperId;
      if (!that.ida) {
        that.$message.error("试卷id错误");
        return
      }
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/paper",
          {
            params: { questionId: rowId }
          }
        )
        .then(function(res) {

          //console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {

              let resQuestionData = res.data.data;
              //console.log(that.resQuestionData, 223344);
              //查看几个空
              let fillNums = resQuestionData.content.split("(+)").length - 1;

              that.fillList = [];
              for (let i = 0; i < fillNums; i++) {
                that.fillList[i] = "";
              }
              //console.log(that.fillList, 88888);

              //填空题替换(+)为（）
              resQuestionData.content = resQuestionData.content.replace(
                /\(\+\)/g,
                "（）"
              );
              that.resQuestionData = resQuestionData;
              let type = that.resQuestionData.type;
              //回填
              that.fillQuestion(that.resQuestionData);


            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },

    //reqAnswer传答题卡答案 成功后执行choseQuestion 传答题卡
    reqAnswer(row, rowNow) {
      //row为选中题数据
      let that = this;
      console.log(that.resQuestionData,33);
      let paperId = that.$route.query.paperId;
      let answerSheetId = that.resQuestionData.answerSheetId;
      let type = that.resQuestionData.type;
      that.flags = true;
      //在这，改变了才赋值，不改变不赋值？？？判断改变
      console.log(that.isChange,1);
      if(that.isChange){
        //222333答题卡赋值答案
        //选择
        if (type === 1) {
          let isMultipleChoice = that.resQuestionData.isMultipleChoice;
          //多选
          if (isMultipleChoice) {
            //console.log(that.checkList,11111);
            rowNow.answer = that.checkList;
          } else {
            //单选
            //console.log(that.radio,2);
            rowNow.answer = that.radio;
          }
        }
        //判断
        if (type === 2) {
          //console.log(that.radio,2);
          rowNow.answer = that.radio2;
        }
        //填空
        if (type === 3) {
          rowNow.answer = that.fillStr;
        }
      }

      that.isChange = false;

      //简答
      if (type === 4) {
        //简答单独判断，接收的值和输入框值相等 = 没改
        let isCJD = that.$refs.answer.value == rowNow.answer;
        console.log(that.$refs.answer.value,3);
        //console.log(that.jdVal,32);
        console.log(rowNow.answer,4);
        if(!isCJD){
          rowNow.answer = that.$refs.answer.value;
        }

      }
      //that.jdVal = '';

      //选择实验题，弹窗
      if (row.type === 6) {
        that.dialogTest = true;
        console.log(that.resQuestionData,22);
        that.flags = false;
        return;
      }

      //清空数据
      //多选
      that.checkList = [];
      //单选
      that.radio = "";
      //判断
      that.radio2 = "";
      //填空
      that.fillList = [];
      //简答
      if (that.$refs.answer) {
        that.$nextTick(function() {
          //不清空不行
          //that.$refs.answer.changeVal("");
        });

      }
      //console.log(that.resQuestionData.answerSheetList, 66666);
     // console.log(rowNow, "row");

      if (!paperId) {
        alert("试卷id错误");
      }

      that.flags = false;
      //传答题卡，包含当前题答案
      //答题卡
      //console.log(that.resQuestionData.answerSheetList,33);
      axios
        .post(
          //'/tes/course/{courseId}/course-test/paper/{paperId}/student/{answerSheetId}/base'
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/student/" +
            answerSheetId +
            "/base",
          that.resQuestionData.answerSheetList,{
            timeout:5000
          }
        )
        .then(function(res) {
          //222333提交当前答案
          if (res.status === 200) {
            if (res.data.code === 200) {
              //选题 反答题卡和当前题
              that.choseQuestion(row.id);
              that.timer2 = setTimeout(()=>{
                that.flags = false
              },0)
              console.log(9990)
            } else {

              that.$message.error(res.data.message);
            }
          }
        })

        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }else{
            that.$message.error('当前网络欠佳,请稍后在试')
            that.flags = false
          }
        });
    },
    //交卷提示
    submitNotice() {
      let that = this;
      //答题卡所有题默认是答了
      let isMeiyou = true;
      let nowId = that.resQuestionData.id;
      console.log(that.resQuestionData.answerSheetList, 33);
      let arrAnswers = that.resQuestionData.answerSheetList.map(
        item => item.answerSheetList
      );
      console.log(arrAnswers, 44);
      arrAnswers = [].concat(...arrAnswers);
      //答题卡合并为一维数组
      console.log(arrAnswers, 55);
      console.log(nowId, 555);
      //去掉实验题和当前题
      arrAnswers = arrAnswers.filter(
        item => item.type !== 6 && item.id !== nowId
      );
      console.log(arrAnswers, 66);
      that.resQuestionData.answerSheetList;
      $.each(arrAnswers, function(i, d) {
        //检测是否答题，没答返回false或undefined，有一题没答及为有题没答，退出循环，答题卡false
        let result = that.isActive(d, i);
        if (!result) {
          isMeiyou = false;
          return;
        }
      });

      //判断当前题
      let nowType = that.resQuestionData.type;
      //当前题默认是答了
      let nowMeiyou = true;
      console.log(that.checkList, 1);
      console.log(that.radio, 2);
      console.log(that.radio2, 3);
      console.log(that.fillList, 4);
      if (that.$refs.answer) {
        console.log(that.$refs.answer.value, 5);
      }
      // //多选
      // that.checkList = [];
      // //单选
      // that.radio = "";
      // //判断
      // that.radio2 = "";
      // //填空
      // that.fillList = [];
      // //简答
      // that.$refs.answer.value;

      //console.log(that.resQuestionData,6689345);
      //选择
      if (nowType === 1) {
        //多选
        if (that.resQuestionData.isMultipleChoice) {
          if (that.checkList.length === 0) {
            //没答 false
            nowMeiyou = false;
          }
        } else {
          //单选
          if (that.radio === "") {
            nowMeiyou = false;
          }
        }
      }
      //判断
      if (nowType === 2) {
        if (that.radio2 === "") {
          nowMeiyou = false;
        }
      }
      //填空
      if (nowType === 3) {
        let isFillNull = that.fillList.every(item => !item.match(/^\s*$/));
        console.log(isFillNull, 66666);
        if (!isFillNull) {
          nowMeiyou = false;
        }
      }
      //简答
      if (nowType === 4) {
        if (that.$refs.answer.value.match(/^\s*$/)) {
          nowMeiyou = false;
        }
      }
      // $('.question-tab-item li').each(function(i,d){
      //   if(!$('.question-tab-item li').eq(i).hasClass('active')){
      //     //有题没填
      //     isMeiyou = false;
      //   }
      //   return;
      // });

      let jiaojuanMessage = "是否交卷";
      if (isMeiyou && nowMeiyou) {
        jiaojuanMessage = "是否交卷？";
      } else {
        jiaojuanMessage = "试题未答完，是否交卷？";
      }
      //let isMeida = $('.question-tab-item li').every(item=>item.hasClass('active'));
      //console.log(isMeida,444);
      // console.log($('.question-tab-item li').hasClass("active"),555);
      that
        .$confirm(jiaojuanMessage, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          that.submitExam();
        })
        .catch(() => {});
    },
    //交卷 传答题卡答案 页面跳转回考试列表页面
    submitExam() {
      //row为选中题数据
      let that = this;
      let paperId = that.$route.query.paperId;
      let answerSheetId = that.resQuestionData.answerSheetId;

      let resQuestionData = that.resQuestionData;
      let answerSheetList = resQuestionData.answerSheetList;
      //答题卡所有题放在一个数组
      let newAnswerSheetList = answerSheetList
        .map(item => item.answerSheetList)
        .reduce((total, num) => total.concat(num));
      let nowIndex = newAnswerSheetList.findIndex(
        item => item.id === resQuestionData.id
      );
      let row = newAnswerSheetList[nowIndex + 1];
      //let rowNow = newAnswerSheetList[nowIndex];
      let rowNow = newAnswerSheetList[nowIndex];
      let type = that.resQuestionData.type;

      //答题卡赋值答案
      //选择
      if (type === 1) {
        let isMultipleChoice = that.resQuestionData.isMultipleChoice;
        console.log(that.resQuestionData.type, 66666);
        //多选
        if (isMultipleChoice) {
          //console.log(that.checkList,11111);
          rowNow.answer = that.checkList;
        } else {
          //单选
          //console.log(that.radio,2);
          rowNow.answer = that.radio;
        }
      }
      //判断
      if (type === 2) {
        //console.log(that.radio,2);
        rowNow.answer = that.radio2;
      }
      //填空
      if (type === 3) {
        rowNow.answer = that.fillStr;
      }
      //简答
      if (type === 4) {
        rowNow.answer = that.$refs.answer.value;
      }
      if (!paperId) {
        alert("试卷id错误");
      }
      axios
        .put(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/student/" +
            answerSheetId +
            "/base",
          that.resQuestionData.answerSheetList
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message.success("交卷成功");
              //大于2没实验题 去列表页
              if (res.data.data > 2) {
                //进入考试页面
                that.$router.push({
                  path: "/Teaching/MyCourses/Examination/StudentExamList"
                });
              }
              //去实验题
              if (res.data.data === 2) {
                //进入考试页面
                console.log('2=====')
                that.$router.push({
                  path: "/StartExamTest",
                  query: {
                    paperId: paperId
                  }
                });
              }
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {

          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //交卷不跳转 yx
    submitFn(){

      //row为选中题数据
      let that = this;
      let paperId = that.$route.query.paperId;
      let answerSheetId = that.resQuestionData.answerSheetId;

      let resQuestionData = that.resQuestionData;
      let answerSheetList = resQuestionData.answerSheetList;
      //答题卡所有题放在一个数组
      let newAnswerSheetList = answerSheetList
        .map(item => item.answerSheetList)
        .reduce((total, num) => total.concat(num));
      let nowIndex = newAnswerSheetList.findIndex(
        item => item.id === resQuestionData.id
      );
      let row = newAnswerSheetList[nowIndex + 1];
      //let rowNow = newAnswerSheetList[nowIndex];
      let rowNow = newAnswerSheetList[nowIndex];
      let type = that.resQuestionData.type;

      //答题卡赋值答案
      //选择
      if (type === 1) {
        let isMultipleChoice = that.resQuestionData.isMultipleChoice;
        //多选
        if (isMultipleChoice) {
          //console.log(that.checkList,11111);
          rowNow.answer = that.checkList;
        } else {
          //单选
          //console.log(that.radio,2);
          rowNow.answer = that.radio;
        }
      }
      //判断
      if (type === 2) {
        //console.log(that.radio,2);
        rowNow.answer = that.radio2;
      }
      //填空
      if (type === 3) {
        rowNow.answer = that.fillStr;
      }
      //简答
      if (type === 4) {
        rowNow.answer = that.$refs.answer.value;
      }
      if (!paperId) {
        alert("试卷id错误");
      }
      axios
        .put(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/student/" +
            answerSheetId +
            "/base",
          that.resQuestionData.answerSheetList
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {

          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },

    //秒转时分
    getHour(sec) {
      // 天时分秒换算
      var int_minute = Math.floor(sec / 60);
      sec = sec - int_minute * 60;
      var int_second = Math.floor(sec);
      let result = "";
      if (int_minute) {
        result = `${int_minute}分${int_second}秒`;
      } else {
        result = `${int_second}秒`;
      }
      return result;
    },
    //定时器 考试时间计算
    setTimer() {

      //console.log(this.timer, 1234567);
      if (this.timer == null) {
        let that = this;
       // console.log(that.ida,147)
        that.timer = setInterval(() => {
          if (this.resQuestionData) {
            if (that.resQuestionData.timeLeft <= 0) {
              //原来是注释的 张瑞让打开,有bug换个写法
              console.log(123123123);
              that.submitFn();
              that.$message.error("考试已结束");
              console.log(234234);
              //考试到时间 进入考试列表
              that.$router.push({
                path: "/Teaching/MyCourses/Examination/StudentExamList",
                name: "StudentExamList",
                //发送数据临时将当前考试改为考试已结束
                params: {
                  // endTimePaperId: that.$route.query.paperId
                  endTimePaperId:that.ida
                }

              });
              //console.log(that.ida,56)
              return;
            }
            that.resQuestionData.timeLeft--;
            //console.log(that.resQuestionData.timeLeft,5);
          }
        }, 1000);
      }
    }
  }
};
</script>
<style scoped>
.jian-content>>>.questionss{
    background: url("../../../assets/images/jian.png") no-repeat 0 0;
    width: 27px;
    height: 49px;
    position: absolute;
    top: 0;
    cursor: pointer;
}
</style>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#start-exam {
  img {
    max-width: 80%;
  }
  .jian-box {
    position: fixed;
    width: 1000px;
    height: 49px;
    top: 350px;
    .jian-content {
      position: relative;
      .an-question {
        width: 27px;
        height: 49px;
        position: absolute;
        top: 0;
        background: url("../../../assets/images/jian.png") no-repeat 0 0;
        cursor: pointer;
        &:hover {
          background: url("../../../assets/images/jian-hover.png") no-repeat 0 0;
        }
      }
      .disabled-question {
        cursor: no-drop;
        &:hover {
          background: url("../../../assets/images/jian.png") no-repeat 0 0;
        }
      }
      .prev-question {
        left: -80px;
      }
      .next-question {
        right: -80px;
        transform: rotate(180deg);
      }
    }
  }
  .jx-content {
    width: 1000px;
  }
  .min-height-content {
    //min-height:420px;
  }
  .fullscreen {
    top: 162px;
  }
  //修改按钮默认样式
  .el-button:focus {
    background-color: #fff;
    color: $btn-blue;
    border-color: $btn-blue;
  }
  .el-button:hover {
    background-color: $btn-blue;
    color: #fff;
    border-color: $btn-blue;
  }
  .el-dialog__footer {
    text-align: center;
  }
  position: relative;
  .mr0 {
    margin-right: 0 !important;
  }
  .preview-top {
    position: relative;
    z-index: 2;
    height: 120px;
    margin: 0px auto 0;
    .preview-top1 {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: #101937;
      position: fixed;
      top: 0;
      color: #fff;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        span {
          margin-right: 40px;
        }
        .preview-title {
          font-size: 18px;
          margin-right: 0;
        }
        .preview-line {
          margin: 0 6px;
        }
      }
    }
    .preview-top2 {
      margin-top: 0;
      width: 100%;
      line-height: 80px;
      position: fixed;
      top: 80px;
      padding: 0;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
        .button-style {
          margin-left: 20px;
        }
        .preview-score {
          width: 80px;
          input {
            width: 80px;
          }
        }
      }
      .preview-top-content2 {
        width: 1200px;
        margin: 0 auto;
        line-height: 30px;
        padding-bottom: 30px;
      }
    }
  }
  .fill-content {
    > div {
      padding: 10px;
    }
    .row-index {
      margin-right: 20px;
    }
    .el-input {
      width: 80%;
      input {
        width: 100%;
      }
    }
  }
  p {
    line-height: inherit;
    display: inline;
  }
  label.el-checkbox.jx-content,
  label.el-radio.jx-content {
    margin-left: 0;
    display: flex;
    white-space: normal;
    .el-checkbox__input,
    .el-radio__input {
      padding-top: 8px;
    }
    .el-checkbox__label {
      display: flex;
      font-size: 0;

      .exam-item-xuan {
        padding: 6px;
        font-size: 16px;
      }
    }
    .el-radio__label {
      display: flex;
      font-size: 0;
      .exam-item-xuan {
        padding: 0 6px;
        font-size: 16px;
      }
    }
    .exam-item-chose {
      line-height: 30px;
      font-size: 16px;
    }
  }
  .exam-top {
    width: 100%;
    padding: 0;
    position: fixed;
    top: 60px;
    z-index: 2;
    margin-top: 0;
    .exam-top-content {
      width: $width;
      margin: 0 auto;
      padding: 0 40px;
      line-height: 80px;
      display: flex;
      justify-content: space-between;
      .exam-title {
        border-bottom: 2px solid $blue;
        color: $blue;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
      }
      .exam-rightbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        > div {
          margin-left: 10px;
        }
        .question-tab {
          margin-top: -4px;
        }
      }
    }
  }
  .exam-content {
    width: 1000px;
    margin: 20px auto 0;
    position: relative;
    z-index: 1;
    .answer-title {
      position: relative;
      line-height: 32px;
      font-size: 16px;
      padding: 30px 40px;
      font-weight: bold;
      .c-blue {
        margin: 0 0 0 10px;
        font-weight: normal;
      }
      .question-num {
        position: absolute;
        min-width: 60px;
        left: 1000px;
        top: 30px;
      }
    }
    .question-item {
      margin-left: 42px;
      display: flex;
      .question-chose {
        &:after {
          content: "：";
        }
      }
      .question-item {
        flex: 1;
      }
    }
  }
  //悬浮框内容
  .el-popper {
    width: 440px;
    box-sizing: border-box;
    padding: 0 16px 20px;
    position: relative;
    .el-badge__content {
      top: 14px;
    }
    .el-tabs__nav {
      padding: 0 20px;
    }
    .el-tabs__active-bar {
      left: 10px;
      padding: 0 10px;
      width: 42px;
      background-color: $blue;
    }
    .el-tabs__item {
      height: 46px;
      line-height: 46px;
    }
    // .el-tabs__item:hover,
    // .el-tabs__item.is-active {
    //   color: $blue;
    // }
    .el-tabs__active-bar.is-top{
        display: none;
    }
    .el-tabs__item:hover,
    .el-tabs__item.is-active {
        color: $blue;
        &:after{
        content: "";
        display: block;
        height: 2px;
        width: 100%;
        background: $blue;
        position: absolute;
        transform: translate(-10px,-4px);
        }
    }
    .question-tab-item {
      padding: 20px 0 0 40px;
      li {
        cursor: pointer;
        position: relative;
        width: 22px;
        height: 23px;
        line-height: 23px;
        margin: 0 20px 20px 0;
        text-align: center;
        float: left;
        border: 1px solid #8e8e8e;
        color: #8e8e8e;
      }
      li.active {
        border-color: $blue;
        color: $blue;
        &:after {
          position: absolute;
          content: "\e614";
          bottom: -7px;
          font-family: "iconfont";
          color: #3fdb9b;
          background: #fff;
          line-height: 14px;
        }
      }
    }
  }
}
.question-change {
  text-align: center;
  margin: 50px 0 0 0;
  .button-style {
    width: 280px;
    height: 49px;
    line-height: 49px;
    border-radius: 49px;
    font-size: 16px;
    margin: 0 10px;
  }
}
//悬浮框内容
.tab-popper.el-popper {
  width: 440px;
  box-sizing: border-box;
  padding: 0 16px 20px;
  position: relative;
  .el-badge__content {
    top: 14px;
  }
  .el-tabs__nav {
    padding: 0 20px;
  }
  .el-tabs__active-bar {
    left: 10px;
    padding: 0 10px;
    width: 42px !important;
    background-color: $blue;
  }
  .el-tabs__item {
    height: 46px;
    line-height: 46px;
  }
  .el-tabs__item:hover,
  .el-tabs__item.is-active {
    color: $blue;
  }
  .question-tab-item {
    padding: 20px 0 0 40px;
    li {
      cursor: pointer;
      position: relative;
      width: 22px;
      height: 23px;
      line-height: 23px;
      margin: 0 20px 20px 0;
      text-align: center;
      float: left;
      border: 1px solid #8e8e8e;
      color: #8e8e8e;
    }
    li.active {
      border-color: $blue;
      color: $blue;
      &:after {
        position: absolute;
        content: "\e614";
        bottom: -7px;
        font-family: "iconfont";
        color: #3fdb9b;
        background: #fff;
        line-height: 14px;
      }
    }
  }
}
</style>
